<template>
	<view class="container">
		<u-sticky bgColor="#fff">

			<view class="section-list">
				<!-- 消息分类标签 -->
				<u-subsection :list="tapTitleList" mode="button" :current="currentTab" @change="switchTab" />
			</view>

<!--			<view class="filter-bar">-->
<!--				<u-dropdown>-->
<!--					&lt;!&ndash; 日期选择 &ndash;&gt;-->
<!--					<u-dropdown-item :title="selectedDate || '日期'">-->
<!--						<view class="picker-wrapper">-->
<!--							<u-button type="primary" size="mini" @click="showCalendar = true"-->
<!--								:customStyle="{ height: '30px' }">选择日期</u-button>-->
<!--						</view>-->
<!--					</u-dropdown-item>-->

<!--					&lt;!&ndash; 分类筛选 &ndash;&gt;-->
<!--					<u-dropdown-item v-model="typeFilter"-->
<!--						:title="typeFilter ? typeOptions.find(opt => opt.value === typeFilter)?.label : '类型'"-->
<!--						:options="typeOptions" @change="handleTypeChange">-->
<!--					</u-dropdown-item>-->

<!--				</u-dropdown>-->

<!--				&lt;!&ndash; 日期选择弹窗 &ndash;&gt;-->
<!--				<u-calendar :show="showCalendar" mode="single" @confirm="onCalendarConfirm"-->
<!--					@close="showCalendar = false" />-->
<!--			</view>-->
		</u-sticky>


		<view class="todo-list">
			<view class="todo-item" v-for="(item, index) in todoList" :key="index">
				<view class="todo-content" @tap="handleTodo(item)">
					<view class="todo-title">{{item.submitterName}} {{ item.categoryName }} </view>
					<view class="todo-desc">任务节点: {{ item.name }} </view>
					<view class="todo-time">摘要:{{ item.description }}</view>
				</view>

			</view>
		</view>
		<tab-bar :current="1" />
	</view>
</template>

<script>
import TabBar from "../../components/tabBar/tabBar.vue";

export default {
		components: {
			TabBar
		},
		data() {
			return {
				todoList: [],
				tapTitleList: [{
						name: "待办",
						badge: 0,
					},
					{
						name: "已办",
					},
				],
				department: '',
				showCalendar: false,
				typeTitle: '类型',
				statusTitle: '状态',
				typeFilter: '',
				statusFilter: '',
				tempDate: '',
				selectedDate: '',
				typeOptions: [
				],
				statusOptions: [{
						label: '全部',
						value: ''
					},
					{
						label: '未反馈',
						value: '0'
					},
					{
						label: '已反馈',
						value: '1'
					}
				],
				//过滤参数
				taskfilter: {
					"owner": this.$commonUnits.getUserId(),
					"searchList": [],
					"stateList": [ 1, 2 ],
          "descOrderBy":"startTime",
					"pageable": true,
					"pageIndex": 0,
					"pageSize": 20,
					"categoryIdList": [],
					"onlyIncludeApprovalTask": true,
					"onlyIncludeReadTask": false
				},
				apikey: "48ddc0b3-cbc4-2f33-004f-6c02cdb00c83",
				currentTab: 0,
			};
		},
		onLoad() {
			this.getDataList();
			this.getTodoCount();
			this.getType();
		},
		onShow() {
			// 每次进入页面时强制刷新数据
			this.getDataList();
		},
		methods: {

      getDataList(){
        this.$commonUnits.request(
            "runtime/task/v1.0/tasks/pageList", "POST", this.taskfilter, this.apikey
        ).then(res => {
          this.todoList = [];
            if (res.statusCode !== 200) {
              uni.showToast({
                title: '暂无数据',
                icon: 'none'
              });
              return;
            }
            // 数据处理
          this.todoList = res.data.content
        })
      },

      getTodoCount() {
        this.$commonUnits.request(
            "runtime/task/v1.0/tasks/taskCount", "POST", this.taskfilter, this.apikey
        ).then(res => {
          if (res.statusCode !== 200) {
            this.todoList = {};
            uni.showToast({
              title: '获取待办数量失败，请重试',
              icon: 'none'
            });
            return;
          }
          this.tapTitleList[0].badge = res.data
        });
      },

			 getType() {
				this.$commonUnits.request(
						"runtime/task/v1.0/tasks/categoryVO", "POST", {
							owner: this.$commonUnits.getUserId(),
							searchList: [],
							stateList: [1, 2],
							displayTerminal: "web",
							withTaskCount: true,
							onlyIncludeApprovalTask: true
						}, this.apikey
					).then(res=>{
          if (res.statusCode !== 200) {
            this.typeOptions = {};
            uni.showToast({
              title: '获取待办类别失败，请重试',
              icon: 'none'
            });
            return;
          }
          // 数据处理
          const result = res.data;
          this.typeOptions = result
              .filter(item => item.parentId) // 只保留parentId有值的项
              .map(item => ({
                label: item.name,
                value: item.id,
              }));
        });
			},

			switchTab(index) {
				//当前标签页index
				this.currentTab = index;
				if (this.currentTab === 0) {
					this.taskfilter.stateList = [1, 2]
				}else if (this.currentTab === 1) {
					this.taskfilter.stateList = [5]
				}
				this.getDataList()
			},

			//跳转流程节点明细操作
			handleTodo(item) {
				// console.log(item.processInstanceId) //获取该任务的流程实例id
				uni.navigateTo({
					url: `/pages/todo/task?id=${item.id}&processInstanceId=${item.processInstanceId}&sourceId=${item.sourceId}`
				});
			},

			// 类型筛选变化
			handleTypeChange(value) {
				this.taskfilter.categoryIdList = [value]
				this.getDataList(); // 重新获取数据
			},

			// 状态筛选变化
			handleStatusChange(value) {
				this.statusFilter = value;
				this.getDataList(); // 重新获取数据
			},

			onCalendarConfirm(date) {
				this.selectedDate = date[0]; // 格式为 'YYYY-MM-DD'
				this.showCalendar = false;
			}
		}
	};
</script>
<style>
	.container {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.fixed-tabs {
		display: flex;
		overflow-x: hidden;
	}

	.fixed-tabs .up-tabs__wrapper {
		display: flex;
		width: 100%;
	}

	.fixed-tabs .up-tabs__item {
		flex: 1;
		text-align: center;
		white-space: nowrap;
		min-width: 0;
		padding: 0 10rpx;
	}



	.todo-list {
		padding: 20rpx;
		padding-bottom: 100px;
	}

	.todo-item {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.todo-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.todo-desc {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.todo-time {
		font-size: 24rpx;
		color: #999;
	}

	.todo-status {
		font-size: 26rpx;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
	}

	.todo-status.false {
		background: #f6ffed;
		color: #52c41a;
	}

	.todo-status.true {
		background: #fff7e6;
		color: #fa8c16;

	}

	.picker-wrapper {
		padding: 20rpx;
		text-align: center;
	}
</style>